<template>
    <div>
        <tab v-model:cur="curTab" @dateChange="handleDateChange" :lackOfMoneyDate="tabsData.lackOfMoney.date"
            :dayPerMonthDate="tabsData.dayPerMonth.date" />
        <div class="mg-t-20">
            <el-card ref="tableRef" >
                <tableComponent class="box-card" :table-header="tableHeader" :table-data="tableData" v-model:page-info="pageInfo"
                    @pageChange="handlePageChange" :no-pagination="isHidePagination" />
            </el-card>
        </div>
    </div>
</template>
<script setup>
import { ref, watch, computed, onMounted, onActivated } from 'vue'
import tab from '../components/tab.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { balanceAndTomorrowCostApi, statisticsMonthlyApi } from 'api/tools/insuranceData.ts'
import dayjs from 'dayjs'

const curTab = ref('lackOfMoney')

const tableHeader = ref([])
const tableData = ref([])
const pageInfo = ref({})
const tableRef = ref(null)

const filterZero = (val) => {
    return val > 9 ? val : '0' + val
}
/**
 * dayType: 日的类型  本日 2  昨日 1
*/
const defaultTime = (dayType = 1) => {
    const year = dayjs().year()
    const month = filterZero(dayjs().month() + 1)
    let day = filterZero(dayjs().date())
    if (dayType === 1) {
        day -= 1
    }
    return `${year}-${month}-${day} 17:00:00`
}

const tabsData = ref({
    lackOfMoney: {
        tableHeader: [
            {
                prop: 'companyName',
                label: '公司名称',
                // width: 200
            },
            {
                prop: 'saleName',
                label: '业务员',
                // width: 100
            },
            {
                prop: 'wesureBalance',
                label: '当前余额',
                // width: 100
            },
            {
                prop: 'tomorrowTotalCost',
                label: '明日扣费',
                // width: 100
            },
            {
                prop: 'costOverBalance',
                label: '扣费后余额',
                // width: 100
            }
        ],
        tableData: [],
        pageInfo: {
            pageNum: 1,
            pageSize: 10,
            total: 0,
        },
        date: {
            startTime: defaultTime(1),
            endTime: defaultTime(2)
        }
    },
    dayPerMonth: {
        tableHeader: [
            {
                prop: 'date',
                label: '日期',
                width: 120
            },
            {
                prop: 'dailyRecharge',
                label: '新增充值',
                width: 120
            },
            {
                prop: 'dailyRechargeClients',
                label: '当日充值客户',
                width: 120
            },
            {
                prop: 'dailyInsuredEmployeesLevel3',
                label: '当日投保人数1-3类',
                width: 150
            },
            {
                prop: 'dailyInsuredEmployeesLevel4',
                label: '当日投保人数4类',
                width: 150
            },
            {
                prop: 'dailyInsuredEmployeesLevel5',
                label: '当日投保人数5类',
                width: 150
            },
            {
                prop: 'dailyInsuredEmployeesLevel6',
                label: '当日投保人数6类',
                width: 150
            },
            {
                prop: 'dailyInsuredEmployeesLevel7',
                label: '当日投保人数7类',
                width: 150
            },
            {
                prop: 'dailyInsuredEmployeesLevel8',
                label: '当日投保人数8类',
                width: 150
            },
            {
                prop: 'dailyInsuredEmployeesLevel9',
                label: '当日投保人数9类',
                width: 150
            },
            {
                prop: 'dailyInsuredEmployeesLevel10',
                label: '当日投保人数10类',
                width: 150
            },
            {
                prop: 'dailyInsuredEmployees',
                label: '当日投保人数',
                width: 120
            },
            {
                prop: 'dailyInsurFeesLevel3',
                label: '当日保费1-3类',
                width: 120
            },
            {
                prop: 'dailyInsurFeesLevel4',
                label: '当日保费4类',
                width: 120
            },
            {
                prop: 'dailyInsurFeesLevel5',
                label: '当日保费5类',
                width: 120
            },
            {
                prop: 'dailyInsurFeesLevel6',
                label: '当日保费6类',
                width: 120
            },
            {
                prop: 'dailyInsurFeesLevel7',
                label: '当日保费7类',
                width: 120
            },
            {
                prop: 'dailyInsurFeesLevel8',
                label: '当日保费8类',
                width: 120
            },
            {
                prop: 'dailyInsurFeesLevel9',
                label: '当日保费9类',
                width: 120
            },
            {
                prop: 'dailyInsurFeesLevel10',
                label: '当日保费10类',
                width: 120
            },
            {
                prop: 'dailyInsurFees',
                label: '当日保费',
                width: 120
            },
            {
                prop: 'dailyInsurCostLevel3',
                label: '当日成本保费1-3类',
                width: 150
            },
            {
                prop: 'dailyInsurCostLevel4',
                label: '当日成本保费4类',
                width: 150
            },
            {
                prop: 'dailyInsurCostLevel5',
                label: '当日成本保费5类',
                width: 150
            },
            {
                prop: 'dailyInsurCostLevel6',
                label: '当日成本保费6类',
                width: 150
            },
            {
                prop: 'dailyInsurCostLevel7',
                label: '当日成本保费7类',
                width: 150
            },
            {
                prop: 'dailyInsurCostLevel8',
                label: '当日成本保费8类',
                width: 150
            },
            {
                prop: 'dailyInsurCostLevel9',
                label: '当日成本保费9类',
                width: 150
            },
            {
                prop: 'dailyInsurCostLevel10',
                label: '当日成本保费10类',
                width: 150
            },
            {
                prop: 'dailyInsurCost',
                label: '当日成本保费',
                width: 120
            }
        ],
        tableData: [],
        pageInfo: {
            pageNum: 1,
            pageSize: 10,
            total: 0,
        },
        date: {
            startTime: defaultTime(1),
            endTime: defaultTime(2)
        }
    }
})

const isHidePagination = computed(() => {
    return curTab.value === 'dayPerMonth'
})

const maxHeight = ref('auto')

// 点击分页后重新获取数据
const handlePageChange = (ev) => {
    pageInfo.value.pageNum = ev.pageNum
    pageInfo.value.pageSize = ev.pageSize
    lackOfMoneyList()
}

const handleDateChange = (ev) => {
    if (ev?.length) {
        tabsData.value[curTab.value].date.startTime = ev[0]
        tabsData.value[curTab.value].date.endTime = ev[1]
    }
}

const lackOfMoneyList = () => {
    balanceAndTomorrowCostApi({
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
    }).then(res => {
        tabsData.value.lackOfMoney.tableData = res.rows
        tableData.value = tabsData.value.lackOfMoney.tableData
        tabsData.value.lackOfMoney.total = res.total
        pageInfo.value.total = res.total
    })
}

const dayPerMonthList = () => {
    statisticsMonthlyApi().then(res => {
        tabsData.value.dayPerMonth.tableData = res
    })
}

watch(curTab, (newval) => {
    tableHeader.value = tabsData.value[newval].tableHeader
    tableData.value = tabsData.value[newval].tableData
    pageInfo.value = tabsData.value[newval].pageInfo
}, {
    immediate: true
})

onMounted(() => {
    // maxHeight.value = tableRef.value.$el.offsetHeight
    // lackOfMoneyList()
    // dayPerMonthList()
})
onActivated(() => {
    maxHeight.value = tableRef.value.$el.offsetHeight
    lackOfMoneyList()
    dayPerMonthList()
})
</script>
<style lang="scss" scoped>
</style>